<template>
	<u-modal closeOnClickOverlay @confirm="confirm" @cancel="cancel" :show="state.show" title="请完善您的信息" showCancelButton cancelText='取消'>
		<u--form labelPosition="left" :model="state.form" :rules="state.rules" ref="formRef" labelWidth='4em' labelAlign="right" style="width: 100%;">
			<u-form-item label="图片" prop="imgBase64" ref="item0">
				<image @click="chooseImageSelf" :src="state.fileList[0] || '/static/camera.png'" mode="" class="uploadImg"></image>
			</u-form-item>
			<u-form-item label="姓名" prop="realName" ref="item1">
				<u--input v-model="state.form.realName" placeholder="请输入您的姓名"></u--input>
			</u-form-item>
			<u-form-item label="手机号" prop="mobile" ref="item2">
				<u--input type="number" v-model="state.form.mobile" placeholder="请输入您的手机号">
				</u--input>
			</u-form-item>
			<u-form-item label="公司" prop="company" ref="item2">
				<u--input v-model="state.form.company" placeholder="请输入您的公司"></u--input>
			</u-form-item>
		</u--form>
	</u-modal>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { onReady } from '@dcloudio/uni-app'
	import { isPhone } from '@/utils/publicFuns.js'
	import { useUserinfo } from '@/store/userinfo.js'
	import { storeToRefs } from 'pinia'
	import request from '@/utils/request.js'
	import { imageToBase64, chooseImage } from '@/utils/publicFuns.js'
	const Userinfo = useUserinfo()
	const { userinfo } = storeToRefs(Userinfo)
	const checkPhone = (rule,value,callback) => {
		return isPhone(value)
	}
	const state = reactive({
		show: false,
		form: {
			mobile: "",
			nickname: "",
			company: "",
			realName: "",
			isNeedHelp: 1,
			imgBase64: ''
		},
		fileList: [],
		rules: {
			realName: [{required: true,message: '请输入姓名'}],
			mobile: [{required: true,message: '请输入手机号'},{validator: checkPhone,message: '手机号格式错误'}],
			company: [{required: true,message: '请输入公司名称'}],
			imgBase64: [{required: true,message: '请选择图片'}]
		}
	})
	const chooseImageSelf = () => {
		chooseImage().then(async res => {
			console.log(res,'ress')
			// #ifdef H5
			const { base64,path } = await imageToBase64(res.files[0])
			state.form.imgBase64 = base64
			state.fileList = [path]
			// #endif
			// #ifdef MP-WEIXIN
			const { base64,path } = await imageToBase64(res[0])
			state.form.imgBase64 = base64
			state.fileList = [path]
			// #endif
		}).catch(err => {
			console.log(err,'errr')
		})
	}
	const formRef = ref(null)
	const confirm = () => {
		formRef.value.validate().then(res => {
			request({
				url:'api/goods/imgSearchAdd',
				method:'post',
				needLogin: true,
				data: {
					...state.form,
					companyName: state.form.company
				}
			}).then(res => {
				getApp().getUserinfo()
				state.show = false;
				uni.showToast({
					icon:'none',
					title: '已提交，稍后将有工作人员与您联系'
				})
			}).catch(err => {
			})
		})
	}
	const cancel = () => {
		state.show = false;
		state.form.imgBase64 = ''
		state.fileList = []
	}
	const getPhoneNumber = () => {
		
	}
	const show = () => {
		for(let key in state.form) {
			if(key !== 'isNeedHelp') {
				state.form[key] = userinfo.value[key]
			}
		}
		console.log(1111)
		state.show = true
	}
	// #ifdef MP-WEIXIN
		onReady(() => {
			formRef.value.setRules(state.rules)
		})
	// #endif
	defineExpose({
		show
	})
</script>
<style lang="scss" scoped>
	.uploadImg {
		$s: 150rpx;
		width: $s;
		height: $s;
		display: block;
		border-radius: 8rpx;
	}
	
</style>